<template>
    <view class=" ">
        <z-paging
            ref="paging"
            v-model="dataList"
            @query="queryList">
            <template #top>
                <tn-navbar>岗亭管理</tn-navbar>
            </template>
            <view class="tn-bg-card">
                <view class="tn-p-xs tn-mt-xl">
                    <view
                        class="tn-shadow-md tn-p-sm tn-mb tn-radius tn-white_bg"
                        v-for="(item, index) in dataList"
                        :key="index">
                        <!-- 标题 + 操作拦 -->
                        <view class="tn-flex justify-between items-center">
                            <view>{{ item.name }}</view>
                            <view class="tn-flex-column">
                                <tn-button
                                    :shadow="true"
                                    shadow-color="tn-grey"
                                    bg-color="tn-white"
                                    @click="openFormModal('update',item.id)">
                                    <tn-icon
                                        name="edit-write-fill"
                                        size="30"></tn-icon>
                                    编辑
                                </tn-button>
                                <tn-button
                                    class="tn-mt-sm"
                                    :shadow="true"
                                    shadow-color="tn-grey"
                                    bg-color="tn-white"
                                    @click="deleteModal(item.id)">
                                    <tn-icon
                                        name="delete"
                                        size="30"
                                        color="tn-red"></tn-icon>
                                    删除
                                </tn-button>
                            </view>
                           
                        </view>
                    </view>
                </view>
            </view>

            <template #loadingMoreNoMore></template>
        </z-paging>

        <view>
            <!-- 悬浮按钮 -->
            <tn-suspend-button
                icon="add"
                size="sm"
                bg-color="tn-gradient-bg__cool-5"
                text-color="tn-white"
                @click="openFormModal('create')" /> 
           <!-- 编辑弹框 -->
           <FormModal ref="formModalRef"  />
        

            <!-- 删除弹框 -->
            <tn-modal ref="modalRef" />
        </view>
    </view>
</template>

<script setup lang="ts">
    import { onMounted, ref } from "vue";
    import TnSuspendButton from "tnuiv3p-tn-suspend-button/index.vue";

    import { COUPON_TYPE, COUPON_UNITS } from "@/utils/dict"; // 引入计费方式和岗亭字典
    import { onLoad } from "@dcloudio/uni-app";
    import type { TnModalInstance } from "@/uni_modules/tuniaoui-vue3";
	import cfsheep from "@/cfsheep";
	import FormModal from "./modal/booth/index.vue";
	/** 页面初始化配置  */
	
	/* 1.字典数据 使用方式：【Dict.dict.字典名称】   为字典数据  【Dict.lable.字典名称[值]】 为获取字典文本 */
	const Dict = cfsheep.$store('dict');
	
    // ===============模拟数据 =========================
	const filterData = ()=>{
		
	};
    // 模拟数据
    const tempList = ref([]);

    // z-paging 示例
    const paging = ref(null);
    // 数据列表
    const dataList = ref();

    const queryList = (pageNo, pageSize) => {
        // 模拟数据

        for (let i = 0; i < 10; i++) {
            tempList.value.push({
                name: "地面" + i,
                type: "主岗亭",
                total: 11111,
                residue: 212,
            });
        }
        paging.value.complete(tempList.value);
    };
    // ===========================================
	// 表单操作
	const formModalRef = ref();
	// 编辑操作员
	const openFormModal = (type: string, id?: number) => {
	  formModalRef.value.open(type, id);
	}; 
	 
 

    // 岗亭操作-岗亭删除ref
    const modalRef = ref<TnModalInstance>();

    // 岗亭操作-岗亭删除弹框确认
    const deleteModal = (id: String) => {
        modalRef.value?.showModal({
            title: "提示",
            content: "是否删除岗亭",
            confirmText: "确定",
            cancelText: "取消",
            showCancel: true,
            cancel: () => {
                return true;
            },
            confirm: () => {
                deleteBooth(id);
            },
        });
    };
    // 删除逻辑
    const deleteBooth = (id: String) => {};
    onLoad(() => { 
    });
</script>
<style lang="scss" scoped></style>
